import React, { Component } from 'react'
import { Dropdown, Menu, Button, Popconfirm, message } from 'antd'
import { UserOutlined, LogoutOutlined } from '@ant-design/icons'
import store from 'store'

// 引入样式
import './index.less'

// 引入图片资源
import logo from '@/assets/images/logo.png'

// 引入子组件
import Personal from './Personal'

export default class Header extends Component {
  state = {
    username: 'admin',
    isVisible: false
  }

  /**
   * 个人中心 弹框 确认
   */
  onOk = () => {
    this.setState({ isVisible: false })
  }

  /**
   * 个人中心 弹框 取消
   */
  onCancel = () => {
    this.setState({ isVisible: false })
  }

  /**
   * 个人中心 弹框 打开
   */
  onShow = () => {
    this.setState({ isVisible: true })
  }

  /**
   * 退出登录
   */
  logout = () => {
    store.remove('user')
    message.success('退出成功')
    window.location.reload()
  }

  render() {
    const { username, isVisible } = this.state

    const dropMenu = (
      <Menu>
        <Menu.Item key="personal"><Button type="link" size="small" onClick={this.onShow}><UserOutlined />&nbsp;个人中心</Button></Menu.Item>
        <Menu.Item key="logout">
          <Popconfirm title="确认要退出吗？" onConfirm={this.logout} okText="确认" cancelText="取消">
            <Button type="link" size="small"><LogoutOutlined />&nbsp;退出</Button>
          </Popconfirm>
        </Menu.Item>
      </Menu>
    )

    return (
      <div className="header">
        <div className="header-user">
          <Dropdown overlay={dropMenu}>
            <span>
              <img src={logo} alt="头像" />
              <strong>{username}</strong>
            </span>
          </Dropdown>
          <Personal isVisible={isVisible} onOk={this.onOk} onCancel={this.onCancel}></Personal>
        </div>
      </div>
    )
  }
}
